import React, { FC } from 'react';
import styles from './styles.modules.less';

const info = {
  dns: 55,
  tcp: 71,
  ssl: 20,
  domReady: 2989,
  TTFB: 97,
  cd: 4,
};

const Waterfall: FC = () => {
  return (
    <div className={styles['perf-waterfall-container']}>
      <div className={styles['name-box']}>
        <ul>
          {Object.keys(info).map((item) => {
            return (
              <li key={item}>
                <span className={styles.name}>{item}</span>
                <span className={styles.des}>desdesdes</span>
              </li>
            );
          })}
        </ul>
      </div>
      <div className={styles['waterfall-box']}>
        <ul>
          {Object.keys(info).map((item) => {
            return (
              <li key={item}>
                <span className={styles['waterfall-item']}>
                  {Object.keys(info).map((val) => {
                    return (
                      <span
                        key={val}
                        className={val}
                        style={{
                          width: info[val] + '%',
                          background: item === val ? 'red' : 'transparent',
                        }}
                      ></span>
                    );
                  })}
                </span>
              </li>
            );
          })}
        </ul>
      </div>
    </div>
  );
};

export default Waterfall;
